import { useEffect, useState } from "react";
import "./index.scss";
import { getFrendList } from "@renderer/api";
import { CloseOutlined } from "@ant-design/icons";
import Frend from "../Frend";
import Search from "../Search";

type PropType = {
  onSubmit: any;
};
const SelectFrend: FC<PropType> = (props): JSX.Element => {
  const { onSubmit } = props;
  const [keyword, setKeyword] = useState("");
  // const [activedId, setActiveId] = useState("");
  const [frendList, setfrendList] = useState<Array<any>>([]);

  useEffect(() => {
    const result = getFrendList();
    setfrendList(result);
  }, []);
  // const handleItemClick = (frendId) => {
  //   setActiveId(frendId);
  // };
  // const isActive = (frendId) => {
  //   if (frendId === activedId) {
  //     return "frend-item--active";
  //   } else {
  //     return "";
  //   }
  // };
  const handleChange = (event) => {
    setKeyword(event.target.value);
  };
  const onSelect = (frendId: string, checked: boolean) => {
    const list = frendList.map((item) => {
      if (item.frendId === frendId) {
        if (checked) {
          return {
            ...item,
            checked: true
          };
        } else {
          return {
            ...item,
            checked: false
          };
        }
      }
      return item;
    });
    console.log("frendList", list);
    setfrendList(list);
    // onSubmit(frendList);
  };
  const handleRemove = (frendId: string) => {
    const list = frendList.map((item) => {
      if (item.frendId === frendId) {
        return {
          ...item,
          checked: false
        };
      }
      return item;
    });

    setfrendList(list);
    onSubmit(frendList);
  };
  const getCount = () => {
    return frendList.filter((x) => x.checked === true).length;
  };
  return (
    <div className="select-frend">
      <div className="left">
        <Search onChange={handleChange}></Search>
        <div className="list">
          {frendList.map((item) => {
            const { frendId, avatar, frendName, checked } = item;
            return (
              <div key={frendId} className="item">
                <Frend
                  frendId={frendId}
                  avatar={avatar}
                  frendName={frendName}
                  showCheckbox={true}
                  checked={checked}
                  onSelect={onSelect}
                ></Frend>
              </div>
            );
          })}
        </div>
      </div>
      <div className="right">
        <div className="count">已选择{getCount()}个好友</div>
        <div className="list">
          {frendList.length > 0 &&
            frendList.map((item: any) => {
              const { frendId, avatar, frendName, checked } = item;
              if (checked) {
                return (
                  <div key={frendId} className="item">
                    <Frend frendId={frendId} avatar={avatar} frendName={frendName}></Frend>
                    <div className="close" onClick={() => handleRemove(frendId)}>
                      <CloseOutlined />
                    </div>
                  </div>
                );
              }
            })}
        </div>
      </div>
    </div>
  );
};

export default SelectFrend;
